<template>
  <div class='main'>
    <div class='title'>
      <img class='title_img' src="../assets/img/mseBoard.png"/>
      <h2 class='title_class'>随手记</h2>
      <div class="inputDiv">
        <!-- 绑定回车事件，v-model绑定输入框的值 -->
        <input type='text' value='' v-model="inputValue" @keydown.enter="enterEvent" placeholder="请输入待办事项"/>
        <img src="../assets/img/send.png" @click="enterEvent">
      </div>
      <div class='title_text'>海贼王我当定了！！！</div>
    </div>
    <h5>正在进行</h5>
    <transition-group name="slide" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
      <div class="planItem" :style="planItemBg" v-for="(item,index) in doingList" :key="'doingList'+index">
        <input type="checkbox" :data-id='item.id'  @click.prevent="checkDone(item.id)">
        <div style="padding:0 20px">{{item.content}}</div>
        <el-button type="danger" style="position:absolute;right:20px" plain @click="deleteItem(item.id)">删除</el-button>
      </div>
    </transition-group>
    <h5>已完成</h5>
    <transition-group name="slide" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
      <div class="planItem" style="background: #DEDEDE" v-for="(item,index) in doneList" :key="'doneList'+index">
        <input type="checkbox" :data-id='item.id' checked @click.prevent="checkDone(item.id)">
        <div style="padding:0 20px">{{item.content}}</div>
        <el-button type="danger" style="position:absolute;right:20px" plain @click="deleteItem(item.id)">删除</el-button>
      </div>
    </transition-group>
  </div>
</template>
<script>
export default {
  data () {
    return {
      planItemBg: {
        background: 'rgb(215, 242, 253)'
      },
      todoList: [],
      inputValue: ''
    }
  },
  computed: {
    // 通过过滤todoList事件得到未做好的列表和已做好的列表
    // eslint-disable-next-line vue/return-in-computed-property
    doingList: function () {
      // eslint-disable-next-line no-unused-vars
      let arr = this.todoList.filter((item, index) => {
        return !item.isDone
      })
      return arr
    },
    // eslint-disable-next-line vue/return-in-computed-property
    doneList: function () {
      // eslint-disable-next-line no-unused-vars
      let arr = this.todoList.filter((item, index) => {
        return item.isDone
      })
      return arr
    }
  },
  mounted: function () {
    this.todoList = localStorage.todoList ? JSON.parse(localStorage.todoList) : []
  },
  methods: {
    enterEvent: function (event) {
      // 将数据添加至todoList
      this.todoList.push({
        content: this.inputValue,
        isDone: false,
        id: this.todoList.length
      })
      // 保存
      this.saveData()
      // 清除输入框的值
      this.inputValue = ''
    },
    // 将数据保存到本地存储
    saveData: function () {
      localStorage.todoList = JSON.stringify(this.todoList)
    },
    checkDone: function (id) {
      this.todoList[id].isDone = !this.todoList[id].isDone
      this.saveData()
    },
    // 删除
    deleteItem: function (id) {
      // 删第几个，一共删多少
      this.todoList.splice(id, 1)
      // 重新排序
      this.todoList.forEach(function (item, i) {
        item.id = i
      })
      this.saveData()
    }
  },
  components: {
  }
}
</script>
<style>
.title{
  width: 100%;
  height: 100px;
  background: #6ECBF9;
  border-radius: 5px;
  margin: 20px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #fff;
  padding: 0 30px;
  position: relative;
}
.title_img{
  width: 35px;
  height: 35px;
  margin: 0 10px;
}
.title_text{
  position: absolute;
  right: 30px;
  }
.title div{margin: 0 10px}
.inputDiv input{
  width: 400px;
  height: 50px;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 5px;
}
.inputDiv{
  /* border: 1px solid #ccc; */
  padding: 0 50px;
}
.inputDiv img{
  width: 60px;
  height: 60px;
  margin-left: 30px;
  cursor: pointer;
}
.planItem{
  color: #333;
  position: relative;
  left: 40px;
  display: flex;
  flex-direction: row;
  /* justify-content: center;*/
  align-items: center;
  /* border: 1px solid #ccc; */
  /* background-color: rgb(215, 242, 253); */
  width: 90%;
  height: 30px;
  padding:40px 20px;
  margin: 10px;
}
input[type="checkbox"]{width:30px;height:30px;display: inline-block;text-align: center;vertical-align: middle; line-height: 28px;position: relative;}
input[type="checkbox"]::before{content: "";position: absolute;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #d9d9d9}
input[type="checkbox"]:checked::before{content: "\2713";background-color: #fff;position: absolute;top: 0;left: 0;width:100%;border: 1px solid #F56C6C;color:#F56C6C;font-size: 30px;font-weight: bold;}
</style>
